<template>
  <home-block
    class="top-line"
    title="火博头条"
  >
    <div slot="left">
      <a :href="leftImg.url">
        <img :src="leftImg.img"/>
      </a>
      <div class="content">
        <p class="title">担保问答</p>
        <ul class="list">
          <router-link
            v-for="(question, index) in questionList"
            :key="index"
            tag="li"
            :to="'/guarantee/' + question.id"
          >
            > {{question.title}}
          </router-link>
        </ul>
      </div>
    </div>
    <div slot="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <swiper :options="swiperOpts">
            <swiper-slide
              v-for="(swiper, index) in swiperList"
              :key="index"
            >
              <div
                class="swiper-item"
                :style="{background: `url(${$baseImgUrl}home/swiper${swiper.img}.png)`, backgroundSize: '100% 100%'}"
              >
                <div class="title-wrap">
                  <p class="title">{{swiper.title}}</p>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="img-list">
            <el-row :gutter="4">
              <el-col
                :span="8"
                v-for="(img, index) in imgs"
                :key="index"
              >
                <div>
                  <span>{{img.company_name}}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span>更多>>></span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <ul class="news-list">
            <router-link
              v-for="(news, index) in newsList"
              :key="index"
              tag="li"
              :to="`/discounts/${news.id}`"
              class="ellipsis"
            >
              <b>{{index + 1}}.</b>
              <span>{{news.title}}</span>
            </router-link>
          </ul>
        </el-col>
      </el-row>
    </div>
  </home-block>
</template>

<script>
import HomeBlock from './HomeBlock.vue';

export default {
  name: 'HomeTopLine',
  data() {
    return {
      swiperOpts: {
        height: '170px',
        autoplay: true,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      leftImg: {},
      questionList: [],
      swiperList: [],
      imgList: [],
      newsList: []
    };
  },
  components: {
    HomeBlock
  },
  computed: {
    imgs() {
      const MAX_COUNT = 5;
      const len = this.imgList.length > MAX_COUNT ? MAX_COUNT : this.imgList.length;
      return this.imgList.slice(0, len);
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$api.getHeadlineList().then(data => {
        const { left, center, right } = data;
        this.leftImg = left.oneimg;
        this.questionList = left.list;
        // 轮播
        this.swiperList = center.lb;
        this.imgList = center.list;

        this.newsList = right;
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .top-line {
    .left {
      .content {
        .title {
          position: relative;
          margin: 5px 0;
          padding-left: 24px;
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 16px;
            content: '';
            background: url('/static/img/home/pre_icon.png') no-repeat 0 center;
            background-position: -6px -32px;
          }
        }
        .list {
          li {
            line-height: 24px;
            padding-left: 10px;
            background: url('/static/img/home/b.png') no-repeat 0 center;
            color: #666;
            cursor: pointer;
            &:hover {
              color: red;
              text-decoration: underline;
            }
          }
        }
      }
    }
    .right {
      .swiper-container {
        width: 428px;
        height: 170px;
        .swiper-item {
          position: relative;
          height: 100%;
          .title-wrap {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            font-size: 12px;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            .title {
              width: 70%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .swiper-container /deep/ .swiper-pagination {
        bottom: 5px;
        text-align: right;
      }
      .swiper-container /deep/ .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border: 1px solid #999;
        border-radius: 0;
        background-color: #666;
        opacity: .8;
      }
      .swiper-container /deep/ .swiper-pagination-bullet-active {
        border: 1px solid red;
        background-color: red;
      }

      .img-list {
        margin-top: 5px;
        padding: 0 10px;
        .el-col {
          margin-bottom: 3px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          &:hover span {
            color: red;
            text-decoration: underline;
          }
          &:last-child div{
            background-color: #318caa;
          }
          div {
            background-color: #0e8b6b;
          }
        }
      }
      .news-list {
        li {
          line-height: 25px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          &:hover span{
            color: red;
            text-decoration: underline;
          }
          b {
            margin-right: 5px;
            color: #fe6601;
          }
          span {
            color: #666;
          }
        }
      }
    }
  }
</style>
